إضافة "إخترنا لك" الموجودة في مدونة محترف بلوجر قمت بإنشائها اعتمادا على خبرتي المتواضعة في مجال تصميم وبرمجة المواقع، وبما أنني لا أبخل في المشاركة فقد خصصت هذه التدوينة الحصرية لشرح كيفية تركيب تلك الإضافة على مدونتك أو موقعك.
المدون
عصام محيميتاريخ النشر
6 فبرابر 2014التصنيف
البرمجة والتصميمتعريف مكتبة jQuery
jQuery هي أحد مكتبات لغة الجافاسكربت JavaScript حرة مفتوحة المصدر وهي من إبتكارات شركة موزيلا (Mozilla)، هدفها الأساسي هو اختصار العديد من النصوص البرمجية التي كان يكتبها المبرمج سابقا وكذلك تسهيل التعقيد الموجود في كتابة أكواد الجافاسكربت، كما تساعد في عمل التأثيرات الحركية علي موقع الويب.
التقنيات المستعملة لإنشاء تلك الإضافة هي مكتبة jQuery ولغة CSS، لذلك عليك أولا أن تتأكد من وجود رابط مكتبة جي كويري في قالب مدونتك. كيف ؟
- من لوحة التحكم الخاصة بمدونتك، إضغط Template وبعدها إختر Edite HTML
- إبحث عن jQuery بالضغط على Ctrl + F من لوحة المفاتيح.
إذا وجدت إحدى العبارات التالية : jQuery.js، jQuery.min.js، ... فاعلم أن قالب مدونتك يحتوي على مكتبة جي كويري وبالتالي يمكنك تجاهل هذه الخطوة والمرور إلى الخطوة الموالية.
- إذا لم تكن موجودة، إبحث عن الوسم <head> وضع أسفله مباشرة السطر التالي :
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
- من لوحة التحكم، إضغط Layout وفي المكان الذي تراه مناسبا للإضافة إضغط Add a Gadget.
- ستظهر لك نافذة تحتوي على أدوات بلوجر الرسمية، إختر HTML/JavaScript لإنشاء أداة جديدة.
- في حقل العنوان Title أكتب "إخترنا لك" على سبيل المثال.
- قم بنسخ الكود التالي وضعه في حقل المحتوى Content :
<script type="text/javascript">
$(document).ready(function() {
$('.feature-caption').css("bottom", "-45px");
$(".featured-posts li").hover(
function(){
$(this).find(".feature-caption").animate({bottom:"0"}, "slow");
},
function(){
$(this).find(".feature-caption").animate({bottom:"-45"}, "fast");
});
});
</script>
<style>
.pb-feature
{
width: 300px;
height: 225px;
}
.feature-caption
{
display:block;
position:absolute;
background: #3eb8b4;
bottom:0px;
width:100%;
color: white;
text-align: center;
}
.featured-posts li
{
width: 300px;
height: 225px;
display:block;
float: left;
position:relative;
overflow:hidden;
}
.featured-posts p
{
padding: 5px;
font-family: tahoma;
font-size: 13px;
text-align: center;
direction: rtl;
}
.featured-posts a
{
color: white;
text-decoration: none;
}
</style>
<div class="pb-feature">
<ul class="featured-posts">
<li>
<a href="http://www.th3problogger.com">
<img src="th3problogger.png" alt="th3problogger" nopin="nopin" height="225" width="300"/>
</a>
<div style="bottom: -70px;" class="feature-caption">
<p><a href="http://www.th3problogger.com">محترف بلوجر - إخترنا لك</a></p>
</div>
</li>
</ul>
</div>
- لتغيير طول وعرض الإضافة : قم باستبدال القيم التالية (300، 225) بما يناسبك.
- قيمة لون الشريط السفلي : 3eb8b4
- عنوان التدوينة : محترف بلوجر - إخترنا لك
- رابط الصورة : th3problogger.png
- أبعاد الصورة : نفس أبعاد الإضافة (300، 225)
- رابط التدوينة المختارة : http://www.th3problogger.com
- إضغط على الزر Save لحفظ الإضافة.
أرجو أن تكون هذه الإضافة قد نالت إعجابك، وإذا واجهتك أي مشاكل عند تركيبها لا تتردد في ترك تعليق بالأسفل وسأحاول مساعدتك قدر المستطاع. أما فيما يخص كيفية جعلها ثابتة عند تمرير الصفحة، فكما سبق وأن قلت في المقدمة " لا أبخل في المشاركة " فهناك تدوينة قادمة سأتطرق فيها إلى كيفية جعل أي إضافة ثابتة عند النزول إلى أسفل الصفحة.
